<script setup lang="ts">
  import { generateIdCard } from '@/apis/IdCardCreate'
  import { addPatientApi, getPatientDetailApi, updatePatientApi } from '@/apis/patient'
  import { onPageShow } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  const fromData = ref({
    name: '浩二',
    idCard: '610327202312244799',
    gender: 1,
    defaultFlag: 1,
  })
  // 2. 表单验证规则
  const formRules: UniHelper.UniFormsRules = {
    name: {
      rules: [
        { required: true, errorMessage: '请填写患者姓名' },
        {
          pattern: '^[\u4e00-\u9fa5]{2,8}$',
          errorMessage: '请填写正确的姓名',
        },
      ],
    },
    idCard: {
      rules: [
        { required: true, errorMessage: '请输入身份证号' },
        {
          pattern:
            '^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$',
          errorMessage: '请填写正确的身份证号',
        },
      ],
    },
    gender: {
      rules: [
        { required: true, errorMessage: '请勾选患者性别' },
        {
          validateFunction: (rule, value, data, callback) => {
            if (Number(data.idCard.charAt(data.idCard.length - 2)) % 2 !== value && data.idCard) {
              callback('性别与身份证号不一致')
            }
          },
        },
      ],
    },
  }
  const changeDefaultFlag = (e: UniHelper.SwitchOnChangeEvent) => {
    fromData.value.defaultFlag = e.detail.value ? 1 : 0
  }

  const form = ref()

  // 更新患者相关逻辑
  const routerParams = defineProps<{ id: string }>()

  const getPatientDetail = async () => {
    const res = await getPatientDetailApi(routerParams.id)
    fromData.value = {
      name: res.name,
      idCard: res.idCard,
      gender: res.gender!,
      defaultFlag: res.defaultFlag,
    }
  }

  onPageShow(async () => {
    if (routerParams.id) {
      uni.setNavigationBarTitle({
        title: '编辑患者',
      })
      getPatientDetail()
    }
    // const res = await generateIdCard()
    // console.log(res)
    // fromData.value.idCard = res.data[0].id
  })

  const save = async () => {
    try {
      await form.value.validate()
      if (routerParams.id) {
        await updatePatientApi({ id: routerParams.id, ...fromData.value })
      } else {
        await addPatientApi(fromData.value)
      }
      uni.showToast({
        title: '保存成功',
        icon: 'success',
      })
      uni.navigateBack()
    } catch (error) {
      console.log(error)
    }
  }
</script>

<template>
  <scroll-page>
    <view class="archive-page">
      <uni-forms border label-width="220rpx" ref="form" :model-value="fromData" :rules="formRules">
        <uni-forms-item label="患者姓名" name="name">
          <uni-easyinput
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{
              color: '#121826',
              backgroundColor: '#ffffff',
              borderColor: 'transparent',
              disableColor: '#F5F5F5',
            }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写真实姓名"
            v-model="fromData.name"
          />
        </uni-forms-item>
        <uni-forms-item label="患者身份证号" name="idCard">
          <uni-easyinput
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{
              color: '#121826',
              backgroundColor: '#ffffff',
              borderColor: 'transparent',
              disableColor: '#F5F5F5',
            }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写身份证号"
            v-model="fromData.idCard"
          />
        </uni-forms-item>
        <uni-forms-item label="患者性别" name="gender">
          <uni-data-checkbox
            selectedColor="#16C2A3"
            :localdata="[
              { text: '男', value: 1 },
              { text: '女', value: 0 },
            ]"
            v-model="fromData.gender"
          />
        </uni-forms-item>
        <uni-forms-item label="默认就诊人" name="defaultFlag">
          <view class="uni-switch">
            <switch
              color="#20c6b2"
              style="transform: scale(0.7)"
              @change="changeDefaultFlag"
              :checked="fromData.defaultFlag === 1"
            />
          </view>
        </uni-forms-item>
        <button class="uni-button" @click="save">保存</button>
      </uni-forms>
      <text>{{ fromData }}</text>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './form.scss';
</style>
